<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <view class="Mall4j add-specifications">
    <view
      class="mask"
      @tap="cancal"
    />
    <view class="content-box">
      <view class="title">
        <text>{{ header }}</text>
        <view
          class="close"
          @tap="cancal"
        />
      </view>
      <view class="sku-list">
        <empty-tips
          v-if="0"
          :tips-list="tipsList"
        />
        <view class="section">
          <text>销售价(元)<span class="red">*</span></text>
          <input
            v-model="price"
            placeholder="请填写"
            type="digit"
            maxlength="15"
            @blur="changeNum('price')"
          >
        </view>
        <view class="section">
          <text>库存<span class="red">*</span></text>
          <input
            v-model="stocks"
            placeholder="请填写"
            type="number"
            maxlength="15"
            @blur="changeInventory"
          >
        </view>
        <view class="section">
          <text>市场价(元)</text>
          <input
            v-model="oriPrice"
            placeholder="划线价(选填)"
            type="digit"
            maxlength="15"
            @blur="changeNum('oriPrice')"
          >
        </view>
        <view
          v-if="mlod!==1"
          class="section"
        >
          <text>商品体积(m³)</text>
          <input
            v-model="volume"
            placeholder="请填写(选填)"
            type="digit"
            maxlength="15"
            @blur="changeNum('volume')"
          >
        </view>
        <view
          v-if="mlod!==1"
          class="section"
        >
          <text>商品重量(kg)</text>
          <input
            v-model="weight"
            placeholder="请填写(选填)"
            type="digit"
            maxlength="15"
            @blur="changeNum('weight')"
          >
        </view>
      </view>
      <view class="add-specifications-footer">
        <common-btn
          :btn-config="prodManaBtnConfig"
          @handle-click-btn="AddSpecificationValue"
        />
      </view>
    </view>
  </view>
</template>

<script setup>
import { reactive } from 'vue'

const emit = defineEmits(['cancal', 'handleClickBtn'])
defineProps({
  title: {
    type: String,
    default: 'name'
  },
  mlod: { // 1虚拟商品 虚拟商品不显示体积重量
    type: Number,
    default: 0
  }
})
const tipsList = ['您还没有添加规格']

const Data = reactive({
  price: '',
  stocks: '',
  oriPrice: '',
  volume: '',
  weight: '',
  prodManaBtnConfig: {
    btnText: '确定',
    isPlain: false
  },

  header: '批量设置'
})

const { price, stocks, oriPrice, volume, weight, prodManaBtnConfig, header } = toRefs(Data)

const cancal = () => {
  emit('cancal')
}

const AddSpecificationValue = () => {
  const obj = {
    price: Data.price,
    stocks: Data.stocks,
    oriPrice: Data.oriPrice,
    volume: Data.volume,
    weight: Data.weight
  }
  emit('handleClickBtn', obj)
}

const changeInventory = () => {
  let num = Data.stocks
  num = Number(num).toFixed(0)
  num = Number(num.toString().replace(/[^\d]/g, ''))
  if (num > 9999999) {
    num = 9999999
  }
  Data.stocks = Number(num)
}

// 输入金额校验
const changeNum = (type) => {
  const num = Data[type]
  Data[type] = checkInput(num)
  if ((type === 'price' || type === 'oriPrice') && Data[type] > 10000000) {
    Data[type] = 10000000
  }
}

/**
     * input输入框只允许输入正数和小数(保留小数点后两位)
     */
const checkInput = (num) => {
  if (num) {
    let tmpVal = parseFloat(num.toString().replace(/[^\d^\\.]/g, ''))
    const reg = /^(0|([1-9]\d*))(\.\d{1,2})?$/ // 最多允许后输入两位小数
    if (!reg.test(tmpVal)) {
      tmpVal = tmpVal + ''
      tmpVal = tmpVal.substring(0, tmpVal.indexOf('.') + 3)
      const n = (tmpVal.split('.')).length - 1
      if (n > 1) {
        tmpVal = tmpVal.substring(0, tmpVal.indexOf('.'))
      }
    }
    return tmpVal
  } else {
    return ''
  }
}
</script>

<style lang="scss" scoped>
.add-specifications {
  @keyframes window-open {
    0% {
      bottom: -900rpx;
    }
    100% {
      bottom: 0;
    }
  }
  .content-box {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    box-sizing: border-box;
    padding: 30rpx;
    border-radius: 20rpx 20rpx 0 0;
    animation: window-open 0.3s 1;
    .title {
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
      font-family: PingFang SC;
      // display: flex;
      // justify-content: center;
      text-align: center;
      margin-bottom: 28rpx;
      .close {
        content: '';
        width: 36rpx;
        height: 36rpx;
        background: #f5f5f5;
        border-radius: 50%;
        float: right;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .close::after {
        content: '';
        display: block;
        width: 14rpx;
        height: 14rpx;
        background: url(~@/static/images/close.png) no-repeat;
        background-size: 14rpx 14rpx;
      }
    }
    .sku-list {
      // height: 600rpx;
      margin-top: 20rpx;
      overflow-y: auto;
      margin-bottom:114rpx ;
    }
  }
  .add-specifications-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    // background: #ffffff;
    height: 114rpx;
  }
}

 .section {
  display: flex;
  align-items: center;
  width: 100%;
  font-size: 30rpx;
  padding: 30rpx 0;
  box-sizing: border-box;
}
 .section:not(:last-child) {
  border-bottom: 2rpx solid #e5e5e5;
}

 .section text {
  width: 25%;
  color: #333;
  font-size: 28rpx;
}

 .section text .red {
  color: #FD4171 ;
}

 .section input {
  width: 70%;
  padding: 0 20rpx;
}
</style>
